<template>
  <div v-loading="loading" class="dashboard-container">
    <PanelGroup :info="statisticsInfo" />
    <!-- 图表 -->
    <el-row :gutter="20">
      <el-col :span="10">
        <div class="chart-wrapper">
          <div class="title">
            各类型设备数量
          </div>
          <v-chart autoresize :option="pieOption" />
        </div>
      </el-col>
      <el-col :span="14">
        <div class="chart-wrapper">
          <div class="title">
            用户等级分布情况
          </div>
          <v-chart autoresize :option="BarOption" />
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <div class="chart-wrapper">
        <div class="title">
          收益统计图
        </div>
        <v-chart autoresize :option="lineOption" />
      </div>
    </el-row>
    <el-row style="margin-top: 20px">
      <div class="chart-wrapper">
        <div class="title">
          区域统计
        </div>
        <page-content ref="pageContent"
                      style="flex:1;"
                      :content-table-config="contentTableConfig"
        >
        </page-content>
      </div>
    </el-row>
  </div>
</template>

<script>
import pieOption, { colorLine } from "./options/pieOption.js";
import PanelGroup from "./components/panel-group.vue";
import BarOption from "./options/barOption.js";
import LineOption from "./options/lineOption.js";
import { fetchHomeStatistics, fetchIncomeStatistics } from "@/api/system";
import moment from "moment";
export default {
  // name: "Dashboard",
  components: {
    PanelGroup,
  },
  data() {
    return {
      loading: false,
      pieOption,
      BarOption: BarOption(0),
      lineOption: LineOption(),
      statisticsInfo: {},
      contentTableConfig: {
        showIndexColumn: true,
        showFooter: false,
        dataList: [],
        propList: [
          { prop: "province", label: "省", minWidth: "120" },
          { prop: "city", label: "市", minWidth: "120" },
          { prop: "county", label: "县", minWidth: "120" },
          { prop: "num", label: "数量", minWidth: "120" },
        ],
      },
    };
  },
  mounted() {
    this.loading = true;
    fetchHomeStatistics()
      .then((res) => {
        const data = res.data;
        this.statisticsInfo = data;
        const { userGradeCountList, deviceCensuses, deviceRegional } = data;
        this.contentTableConfig.dataList = deviceRegional ?? [];
        this.$refs.pageContent.queryTblMain();
        this.BarOption.xAxis.data = userGradeCountList.map((item) => item.name);
        this.BarOption.series[0].data = userGradeCountList.map(
          (item) => item.count
        );

        const pieData = deviceCensuses
          .map((item) => {
            return {
              name: item.deviceTypeText,
              value: item.count,
            };
          })
          .sort((a, b) => b.value - a.value);
        pieData.forEach((v, i) => {
          v.labelLine = {
            lineStyle: {
              width: 1,
              color: colorLine[i],
            },
          };
        });

        this.pieOption.series[0].data = pieData;
      })
      .finally(() => {
        this.loading = false;
      });
    this.getIncomeStatistics();
  },
  created() {
    document.body.className = "dashboard";
  },
  beforeDestroy() {
    document.body.className = "";
  },
  methods: {
    getIncomeStatistics() {
      const sDate = moment().subtract(90, "days").startOf('month').format("YYYY-MM-DD");
      const eDate = moment().format("YYYY-MM-DD");
      const params = {
        sDate,
        eDate,
      };
      fetchIncomeStatistics(params).then((res) => {
          const data=res.data;
          this.lineOption.xAxis.data=data.map(item=>item.date);
          this.lineOption.series[0].data=data.map(item=>item.count);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 20px;
    line-height: 46px;
  }
}
.chart-wrapper {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 16px;
  height: 420px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}
.title {
  padding: 10px 0 10px;
  font-size: 18px;
}
</style>
<style lang="scss">
.dashboard .app-main {
  height: auto;
}
</style>
